import {defineComponent} from "vue";
import {useAppStore} from "@/stores/modules/app";
import type {DesktopInterface} from "@/typings/desktop";
import {requireImg} from "@utils/common/Image";
import {EmitNames} from "@/constants/common";
import emitter from "@utils/common/Mitt";
import Dock from "@layouts/base/dock";

/**
 * Launchpad 启动台组件
 */
export default defineComponent({
  name: "LaunchpadLayout",
  setup() {
    onMounted(() => {
      const { width } = useElementSize(rootEl.value);
      // 解决布局中最后不满行的问题
      watch(width, newValue => {
        dockAppArr.value = [];
        const arrs: any[] = Object.values(appShortcutMap.value).filter((it: any) => it.isInLaunchpad);
        dockAppArr.value.push(...arrs);
        // 应用程序的数量
        let len = arrs.length;
        // 计算列数 = 当前的宽度 除于 每个应用程序的宽度 （结果4舍5入）
        const colNum = Math.floor(newValue / (240 + 10));
        // 计算行数 = 应用程序的总数 除于 列数 （结果向上取正）
        const rowNum = Math.ceil(len / colNum);
        colsGrid.value = `repeat(${colNum}, 200px)`;
        rowsGrid.value = `repeat(${rowNum}, 192px)`;
      });
    });

    const rootEl = ref<HTMLElement>();
    const colsGrid = ref("");
    const rowsGrid = ref("");
    let appStore = useAppStore();
    const { appShortcutMap } = storeToRefs(appStore);
    const dockAppArr = ref<DesktopInterface.AppShortcut[]>();

    return () => (
      <main
        id="launchpad"
        class="fixed inset-0 flex flex-col justify-center items-center -mt-[100px] z-[1900] backdrop-blur-[50px]"
        onClick={e => {
          e.stopPropagation();
          emitter.emit(EmitNames.Launchpad);
        }}
        onContextmenu={e => {
          e.preventDefault();
        }}
      >
        <div class="body flex relative grow w-full flex-row justify-center items-center">
          <div
            ref={rootEl}
            class="fixed left-[6%] right-[6%] h-[85vh] mt-36 p-[5px_10px] grid justify-between overflow-auto"
            style={{
              gridTemplateColumns: colsGrid.value,
              gridTemplateRows: rowsGrid.value,
              gridRowGap: "5px",
            }}
          >
            {dockAppArr.value
              ?.sort((a1, a2) => a1.sort - a2.sort)
              .map(item => {
                return (
                  <div
                    class="h-40 mx-1.5 flex flex-col justify-center items-center text-center cursor-pointer max-w-[200px]"
                    onClick={e => {
                      e.stopPropagation();
                      appStore.openApp(item);
                      emitter.emit(EmitNames.Launchpad);
                    }}
                  >
                    <div
                      style={{
                        backgroundColor: item.iconBgColor,
                        boxShadow: item.title != "" ? "0 2px 8px rgb(0 0 0 / 50%)" : "",
                        backgroundImage: "url(" + requireImg(item.icon) + ")",
                      }}
                      class="rounded-[20px] flex justify-center items-center text-center w-20 h-20 bg-no-repeat bg-cover object-cover"
                    ></div>
                    <div
                      class="text-sm font-semibold mt-4 whitespace-nowrap overflow-ellipsis overflow-hidden"
                      v-text={item.title}
                    ></div>
                  </div>
                );
              })}
          </div>
        </div>

        <Dock />
      </main>
    );
  },
});
